import React, { Component, Fragment } from 'react';
import Link from 'umi/link'
import { connect } from 'dva';
import {  Card,  List, Tag, Icon, Button } from 'antd';
import { FormattedMessage } from 'umi/locale';

import TagSelect from '@/components/TagSelect';
import StandardFormRow from '@/components/StandardFormRow';

import ArticleListContent from './ArticleListContent';
import styles from './Articles.less';

const pageSize = 5;

const linePath = '/articles/article'

@connect(({ article, loading }) => ({
  list: article,
  loading: loading.models.list,
}))
class SearchList extends Component {
  componentDidMount() {
    const { dispatch, location: {pathname } } = this.props;

    const stateMap = {
        '/articles/draft': 'draft',
        '/articles/todo': 'todo',
        '/articles/publish': 'done',
        '/articles/recycle': 'cancelled',
    }

    const state = stateMap[pathname]

    dispatch({
      type: 'article/fetch',
      payload: {
        state,
      },
    });
  }


  fetchMore = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'document/appendFetch',
      payload: {
        count: pageSize,
      },
    });
  };

  render() {
    const {
      list: { list },
      loading,
    } = this.props;

    const IconText = ({ type, text }) => (
      <span>
        <Icon type={type} style={{ marginRight: 8 }} />
        {text}
      </span>
    );

    return (
      <Fragment>
        <Card
          style={{ marginTop: 24 }}
          bordered={false}
          bodyStyle={{ padding: '8px 32px 32px 32px' }}
        >
          <List
            size="large"
            loading={list.length === 0 ? loading : false}
            rowKey="id"
            itemLayout="vertical"
            dataSource={list}
            renderItem={item => (
              <List.Item
                key={item.id}
                actions={[
                  <IconText type="star-o" text={item.star} />,
                  <IconText type="like-o" text={item.like} />,
                  <IconText type="message" text={item.message} />,
                ]}
                extra={<div className={styles.listItemExtra} />}
              >
                <List.Item.Meta
                  title={
                    <Link to={`${linePath}?id=${item.id}`}>{item.title}</Link>
                  }
                  description={
                    <span>
                      {
                        item.tags.map(( tag,index ) => <Tag key={index}> {tag} </Tag>)
                      }
                    </span>
                  }
                />
                <ArticleListContent data={item} />
              </List.Item>
            )}
          />
        </Card>
      </Fragment>
    );
  }
}

export default SearchList;
